<template>
  <div class="box">
    <div class="box_left">
      <Common-Slider-Bar
        ref="silderBar"
        :item-view-option="{
          itemTitle: 'PROGRAMNAME',
          key: 'ID',
          menuTitle: 'PROGRAMNAME'
        }"
        :open-mune-children="openMuneChildren"
        :request="{
          url: url + '/dynamicReportForm/queryBodyByProduce',
          method: 'post',
          data: searchData
        }"
        :search-key="'PROGRAMNAME'"
        @select="selectData"
        @fatherSelct="fatherSelct"
        @requestSuccess="requestSuccess"
      >
        <template slot="top">
          <el-select
            v-model="projectAnalysisType"
            class="projectAnalysisType"
            @change="projectAnalysisTypeChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </Common-Slider-Bar>
    </div>
    <div class="box_right">
      <Breadcrumb />
      <div class="box_top">
        <Skeleton v-if="loading" />
        <div class="box_top_left">
          <div class="title_top">
            <h3>{{ programName || "残疾人城乡居民医疗参保费退费" }}</h3>
          </div>
          <div class="btn_bot">
            <div class="btn_bot_top">
              <div
                v-for="(item, index) in MidList"
                :key="index"
                :class="index === 2 ? 'btn_dataNew' : 'btn_data'"
              >
                <p>{{ item.num }}</p>
                <span>{{ item.title }}</span>
              </div>
            </div>
            <div class="btn_bot_bot">
              <div
                v-for="item in btn_list"
                :key="item.id"
                :class="btnFlag === item.id ? 'newbtn' : 'btn'"
                @click="btnChange(item.menuId, item.id)"
              >
                <span>{{ item.name }}</span>
                <p>{{ item.text }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="box_top_right">
          <img src="@/assets/img/homwAnalyse/插画.png" alt="">
        </div>
      </div>
      <div class="box_bot">
        <table-common
          ref="tableCommon"
          :menu-id="menuId"
          :flag="flag"
          :form-guid="formGuid"
          :title="title"
          :filter-list="filterList"
        />
      </div>
    </div>
  </div>
</template>
<script>
// import LeftTree from '@/views/fundSupervision/components/LeftTree';
import CommonSliderBar from '@/components/CommonSliderBar';
import tableCommon from '@/components/tableCommon/index.vue';
import Breadcrumb from '@/components/Breadcrumb/index.vue';
import Skeleton from '@/components/Skeleton/index.vue';
import baseUrl from '@/utils/processRequest1';

export default {
  components: {
    CommonSliderBar,
    tableCommon,
    Breadcrumb,
    Skeleton
  },
  data() {
    return {
      url: '',
      Year: '',
      openMuneChildren: false,
      xcRoleName: '',
      options: [{ value: 1, label: '项目类型' }, { value: 2, label: '条线' }],
      projectAnalysisType: 1,
      searchData: {},
      btn_list: [
        {
          id: 1,
          name: '公开公示',
          text: '事前',
          menuId: 1623551096894
        },
        {
          id: 2,
          name: '支付凭证',
          text: '事中',
          menuId: 1623568287771
        },
        {
          id: 3,
          name: '抽查巡查',
          text: '事后',
          menuId: 1623568253011
        }
      ],
      btnFlag: 1,
      btnlist: [
        {
          name: '预览',
          id: 1
        },
        {
          name: '下载',
          id: 2
        }
      ],
      menuId: undefined,
      flag: '0',
      formGuid: '',
      title: '文件依据',
      filterList: [],
      chooseYear: localStorage.getItem('chooseYear'),
      programName: '',
      MidList: [
        {
          title: '总预算',
          num: 0
        },
        {
          title: '支出数',
          num: 0
        },
        {
          title: '办公室',
          num: 0
        }
      ],
      loading: true,
      xcRoleId: '',
      isYCrole: false
    };
  },

  mounted() {
    this.menuId = 1623551096894;
    this.filterList = [
      { col: 'YEAR', value: this.chooseYear },
      { col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE },
      { col: 'PROGRAMNAME', value: '' }
    ];
  },
  created() {
    const {
      ENTERPRISECODE
    } = this.$route.query;
    this.xcRoleName = localStorage.getItem('xcRoleName');
    this.Year = localStorage.getItem('chooseYear');
    this.xcRoleId = localStorage.getItem('xcRoleId');
    if (['458'].includes(this.xcRoleId)) {
      this.isYCrole = true;
    }
    if (this.isYCrole) {
      this.searchData = {
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 596,
        resultAsTree: true,
        orderBy: 1
      // filterList: [
      //   // { col: "ENTERPRISECODE", value: this.$route.query.ENTERPRISECODE },
      //   // { col: "ISCAPITAL", value: "是" },
      //   { col: "YEAR", value: this.Year }
      // ]
      };
    } else {
      this.searchData = {
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 596,
        resultAsTree: true,
        orderBy: 1,
        filterList: [
          { col: 'ENTERPRISECODE', value: ENTERPRISECODE }
        // { col: "ISCAPITAL", value: "是" },
        // { col: "YEAR", value: this.Year }
        ]
      };
    }

    this.init();
  },
  methods: {
    requestSuccess(obj) {
      const { data } = obj;
      if (!this.isYCrole) {
        data.length && this.$refs.silderBar.openKeys([data[0].ID]);
      }
    },
    init() {
      baseUrl().then(res => {
        this.url = res.url;
        this.$nextTick(() => {
          this.$refs.silderBar.send();
        });
      });
    },
    btnChange(val, id) {
      this.btnFlag = id;
      this.menuId = val;
    },
    getRigheList(val) {
      this.programName = val.value.PROGRAMNAME;
      const {
        value: { ENTERPRISECODE, ENTERPRISENAME, PROGRAMNAME }
      } = val;
      if (this.isYCrol) {
        this.filterList = [
          { col: 'YEAR', value: this.chooseYear },
          // { col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE },
          { col: 'PROGRAMNAME', value: this.programName }
        ];
      } else {
        this.filterList = [
          { col: 'YEAR', value: this.chooseYear },
          // { col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE },
          { col: 'ENTERPRISECODE', value: ENTERPRISECODE },
          { col: 'PROGRAMNAME', value: this.programName }
        ];
      }

      this.MidList[0].num = val.value.MONEY1;
      this.MidList[1].num = val.value.MONEY2;
      this.MidList[2].num = val.value.DIVISION;
      this.$route.query.ENTERPRISECODE = ENTERPRISECODE;
      this.$route.query.ENTERPRISENAME = ENTERPRISENAME;
      this.$route.query.PROGRAMNAME = PROGRAMNAME;
    },
    selectData(val) {
      this.getRigheList(val);
      this.loading = false;
    },
    fatherSelct(val) {
      this.getRigheList(val);
      this.loading = false;
    },
    projectAnalysisTypeChange(val) {
      const {
        ENTERPRISECODE
      } = this.$route.query;
      if (val === 1) {
        this.searchData = {
          pageIndex: 0,
          pageSize: 100,
          pageType: 1,
          tableId: 596,
          resultAsTree: true,
          orderBy: 1,
          filterList: [
            // { col: "ENTERPRISECODE", value: this.$route.query.ENTERPRISECODE },
            // { col: "ISCAPITAL", value: "是" },
            // { col: "YEAR", value: this.Year }
          ]
        };
        if (ENTERPRISECODE && !this.isYCrole) {
          this.searchData.filterList = this.searchData.filterList.concat([
            {
              col: 'ENTERPRISECODE',
              value: ENTERPRISECODE
            }
          ]);
        }
        setTimeout(() => {
          this.$refs.silderBar.send();
        }, 0);
      } else if (val === 2) {
        this.searchData = {
          pageIndex: 0,
          pageSize: 100,
          pageType: 1,
          tableId: 597,
          resultAsTree: true,
          orderBy: 1,
          filterList: [
            // { col: "ISCAPITAL", value: "是" },
            // { col: "YEAR", value: this.Year }
          ]
        };
        if (ENTERPRISECODE && !this.isYCrole) {
          this.searchData.filterList = this.searchData.filterList.concat([
            {
              col: 'ENTERPRISECODE',
              value: ENTERPRISECODE
            }
          ]);
        }
        setTimeout(() => {
          this.$refs.silderBar.send();
        }, 0);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.box {
  display: flex;
  height: 100%;
}
.box_left {
  width: px2vw(280px);
  height: 100%;
  background: #ffffff;
  .projectAnalysisType {
    width: 90%;
    padding-left: 10%;
  }
}

.box_right {
  flex: 1;
  padding: px2vw(24px);
  padding-top: px2vw((5px));
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.box_top {
  height: 31%;
  display: flex;
  overflow: hidden;
  position: relative;
  .box_top_left {
    width: 71%;
    height: 100%;
    background: #ffffff;
    border-radius: 4px;
    .title_top {
      height: 20%;
      padding: px2vw(20px) 0 0 px2vw(34px);
      h3 {
        font-size: px2vw(32px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #333333;
        margin: 0;
      }
    }
    .btn_bot {
      height: 80%;
      .btn_bot_top {
        height: 44%;
        display: flex;
        align-items: flex-end;
        .btn_dataNew {
          width: 36%;
          padding-left: 5.8%;
          p {
            color: #faad14;
            font-size: px2vw(26px);
            margin: 0;
            font-weight: 700;
          }
          span {
            font-size: px2vw(18px);
            color: rgba(0, 0, 0, 0.85);
          }
        }
        .btn_data {
          width: 32%;
          padding-left: 5.5%;
          margin-right: 3%;
          p {
            color: #faad14;
            font-size: px2vw(30px);
            margin: 0;
            font-weight: 700;
          }
          span {
            font-size: px2vw(18px);
            color: rgba(0, 0, 0, 0.85);
          }
        }
      }
      .btn_bot_bot {
        height: 56%;
        cursor: pointer;
        display: flex;
        justify-content: space-around;
      }
      .btn {
        margin-top: px2vw(6px);
        width: px2vw(250px);
        height: 72%;
        border: 1px solid #1492ff;
        border-radius: 5px;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        position: relative;
        span {
          font-size: px2vw(28px);
          color: #1492ff;
          // padding-left: 25%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-20%, -50%);
        }
        p {
          position: absolute;
          left: 5%;
          top: 5%;
          color: #99cbf9;
          font-size: px2vw(20px);
        }
      }
      .newbtn {
        margin-top: px2vw(6px);
        width: px2vw(240px);
        height: 72%;
        border: 1px solid #1492ff;
        border-radius: 5px;
        // display: flex;
        // justify-content: flex-end;
        // align-items: center;
        position: relative;
        background: url("~@/assets/img/homwAnalyse/支出预算编制备份 12.png") 12%
          12% no-repeat;
        background-size: 120% 120%;
        span {
          font-size: px2vw(28px);
          color: #ffffff;
          // padding-right: px2vw(36px);
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-20%, -50%);
        }
        p {
          position: absolute;
          left: 5%;
          top: 5%;
          color: rgba(255, 255, 255, 0.8);
          font-size: px2vw(20px);
        }
      }
    }
  }
  .box_top_right {
    width: calc(29% - px2vw(34px));
    margin-left: px2vw(34px);
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.box_bot {
  margin-top: px2vw(24px);
  // height: 66%;
  flex: 1;
  overflow: auto;
  background: #ffffff;
  border-radius: 4px;
  padding-left: px2vw(25px);
  .title_bot {
    height: px2vw(55px);
    padding-bottom: px2vw(8px);
    border-bottom: 1px solid #eeeeee;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    h3 {
      font-size: px2vw(16px);
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #333333;
      margin: 0;
    }
    .btn_table {
      padding-right: px2vw(25px);
    }
  }
}
/deep/.skeleton {
  bottom: 0 !important;
}
</style>
